<template>
  <div v-if="userInfo">
    <TopNav titleText="编辑资料"/>
    <div class="avatarWrapper">
      <img v-if="userInfo.head_img" :src="$axios.defaults.baseURL + userInfo.head_img" alt="" class="avatar">
      <img v-else src="@/assets/logo.png" alt="" class="avatar">
      <!-- 用 v-bind 形式传入一个函数, 用来处理选中后的图片
      其实就是上传 + 后续修改操作 -->
      <van-uploader :after-read="uploadAvatar"/>
    </div>
    <NavBar labelText="昵称" :descText="userInfo.nickname" @barClick="isShowNickname = true"/>
    <NavBar labelText="密码" descText="*****" @barClick="isShowPassword = true"/>
    <NavBar labelText="性别" :descText="userInfo.gender==1?'男':'女'" @barClick="isShowGender = true"/>
    
    <!-- 这里一下是专门放弹窗代码的位置 -->
    <!-- 昵称弹窗 -->
    <van-dialog 
      v-model="isShowNickname" 
      title="修改昵称" 
      show-cancel-button 
      @confirm="editProfile({nickname: newNickname})">
      <van-field v-model="newNickname" placeholder="请输入新昵称" />
    </van-dialog>
    <!-- 密码弹窗 -->
    <van-dialog 
      v-model="isShowPassword" 
      title="修改密码" 
      show-cancel-button 
      @confirm="editProfile({password: newPassword})"
    >
      <van-field v-model="newPassword" placeholder="请输入新密码" type="password" />
    </van-dialog>
    <!-- 性别菜单 -->
    <van-action-sheet 
      v-model="isShowGender" 
      :actions="genders" 
      @select="setGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import TopNav from '@/components/TopNav'
import NavBar from '@/components/NavBar'
export default {
  components: {
    TopNav,
    NavBar
  },
  data() {
    return {
      userInfo: null,
      genders: [
        {
          name: '男',
          gender: 1
        },
        {
          name: '女',
          gender: 0
        }
      ],
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      newNickname: '',
      newPassword: ''
    }
  },
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      // 这个钩子函数是创建完毕，数据准备完毕，但是 dom 还没有
      this.$axios({
        url: '/user/' + localStorage.getItem('userId'),
        method: 'get',
      }).then(res=>{
        const {message, data} = res.data;
        if (message == '获取成功') {
          this.userInfo = data;
          console.log(this.userInfo);
          
        }
      })
    },
    editProfile(newData) {
      this.$axios({
        url: '/user_update/' + localStorage.getItem('userId'),
        method: 'post',
        data: newData,
      }).then(res=>{
        console.log(res.data);
        // 直接改值是一种可行的方法
        // this.userInfo.nickname = this.newNickname
        // 还是建议修改完直接从远程获取一次新数据
        if (res.data.message == '修改成功') {
          this.loadPage();
        }
      })
    },
    setGender(item) {
      const dataObj = {
        gender: item.gender
      }
      this.editProfile(dataObj)
      this.isShowGender = false
    },
    uploadAvatar(fileObj) {
      // 会接受一个参数 fileObj 文件对象
      // 其中文件就在 fileObj.file
      // 1. 先将图片转成二进制的参数格式
      var formData = new FormData();
      formData.append('file',fileObj.file)

      // 使用 ajax 上传图片
      this.$axios({
        url: '/upload',
        method: 'post',
        data: formData,
      }).then(res=>{
        console.log(res.data);
        const { message, data } = res.data
        if (message == "文件上传成功") {
          // 这里知道我们的头像地址应该是 data.url
          // 作为参数往服务器发起修改请求即可
          this.editProfile({
            head_img: data.url
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.avatarWrapper {
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  .van-uploader {
    position: absolute;
    opacity: 0;
  }
}
</style>